<script setup>
import { onMounted, ref } from 'vue'
import { loginAPI } from '@/api/login'
import router from '@/router'

const loginBox = ref()
const userName = ref('')
const password = ref('')
const onSubmit = async () => {
	let res = await loginAPI({ userName: userName.value, password: password.value })
	console.dir(res)
	if (res) {
		localStorage.setItem('token', res.data)
		console.log('token存入成功')
		await router.replace({ path: '/home' })
	}
}

onMounted(() => {
	localStorage.clear()
	loginBox.value.style.height = window.innerHeight + 'px'
})
</script>

<template>
	<div class="html-page" ref="loginBox">
		<div class="title">欢迎来到<br />智能考勤管理系统</div>
		<van-form @submit="onSubmit">
			<div class="row">
				<div class="form-label"><img class="h-img" src="./image/user-icon.png" alt="" />账号</div>
				<van-field
					v-model.trim="userName"
					clearable
					name="账号"
					:rules="[{ required: true, message: '请填写账号' }]"
				/>
			</div>
			<div class="row">
				<div class="form-label"><img class="h-img" src="./image/lock.png" alt="" />密码</div>
				<div class="password">
					<van-field
						v-model.trim="password"
						type="password"
						name="密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>
				</div>
			</div>
			<div style="margin: 16px">
				<van-button class="btn" round block native-type="submit">登录</van-button>
			</div>
		</van-form>
	</div>
</template>

<style scoped lang="scss">
.van-cell {
	background: transparent;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}

.btn {
	font-size: 32px;
	font-family: 'Microsoft YaHei UI', sans-serif;
	font-weight: 600;
	color: #000;
}

.html-page {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 154px 36px 0;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 1) url('./image/login-bg.png') no-repeat center;
	background-size: cover;
	overflow: hidden;

	.title {
		font-size: 66px;
		line-height: 80px;
		font-family: 'Microsoft YaHei UI', sans-serif;
		font-weight: 400;
		color: #fff;
		letter-spacing: 1px;
		text-shadow: 0 4px 8px #1e96e1;
		margin-bottom: 154px;
	}

	.row {
		display: flex;
		flex-direction: column;
		margin-bottom: 64px;

		.van-cell {
			padding-right: 8px;
		}

		.van-field_control,
		i {
			color: #fff;
		}

		.password {
			position: relative;

			.ps {
				width: 32px;
				height: 14px;
				position: absolute;
				right: 8px;
				top: 50%;
				margin-top: -7px;
			}
		}

		.form-label {
			display: flex;
			align-items: center;
			font-size: 32px;
			line-height: 32px;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-weight: 400;
			color: #fff;

			.h-img {
				width: 40px;
				height: 40px;
				margin-right: 10px;
			}
		}
	}
}
</style>
